Ensure GOV.UK Frontend component selectors cannot conflict when initialised #1443

NickColley · 2019-06-11T11:08:14Z

This change introduces to main changes:

govuk- prefix to all [data-module] selectors to avoid conflicts.
We have found users using the same name without a prefix which results in a conflicts that break components: Namespacing [data-module] to avoid conflicts #1218
Initialising the button and details component with a [data-module] selector so all components are initialised consistently.

Doing this for the button is important as it unblocks a bugfix for the 'prevent double click' feature: #1433

It will allow us to fix this issue without adding JavaScript behaviour to all buttons on pages, which could result in performance or conflict issues.

Closes #1218

This ensures that the components cannot accidentally conflict with other components with the same name.

… selector We want to make sure we're only adding JavaScript enhancements to buttons that clearly have the `[data-module="govuk-button"]` attribute. This will allow us to fix an issue where we want to be able to scope the 'prevent double click' feature from failing on multiple buttons.

…e selector We want to make sure we're only adding JavaScript enhancements to details elements that clearly have the `[data-module="govuk-details"]` attribute. This makes sure the GOV.UK Frontend is future friendly and makes this component consistent with the rest of the components.

These are now consistent with all components

36degrees

Needs a changelog entry

NickColley · 2019-06-12T10:26:17Z

CHANGELOG.md

+ var $buttons = document.querySelector('[data-module="govuk-buttons"]')
+ ```
+
+ ### Details component


Is there a way to avoid the duplication here? I duplicated it to be really clear but it makes it lengthy

NickColley · 2019-06-12T10:26:45Z

CHANGELOG.md

@@ -268,6 +268,77 @@

 ([PR #1376](https://github.com/alphagov/govuk-frontend/pull/1376))

+- Ensure GOV.UK Frontend component selectors cannot conflict when initialised


@m-green would be good to get your thoughts on this

hannalaakso · 2019-06-12T13:25:11Z

CHANGELOG.md

+
+ If you're using Nunjucks macros, and are [using the `initAll` function](https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#option-1-include-javascript) you will not be affected.
+
+ If you are using HTML, you will need to add the `govuk-` prefix to any `[data-module]` attributes referencing GOV.UK Frontend components.


I wonder if

referencing GOV.UK Frontend components.

is clear? Could we say

any [data-module] attributes on GOV.UK Frontend component HTML

We could add

and any [data-module] attributes referencing GOV.UK Frontend scripts in your custom components

although it seems like a fairly unlikely scenario.

Or alternatively

any [data-module] attributes in HTML which reference GOV.UK Frontend Javascript
🤷‍♀

Will try and make this clearer thanks Hanna :)

I've moved the example around and adjusted the wording so it hopefully makes it clearer, lemme know what you think.

hannalaakso · 2019-06-12T13:30:46Z

CHANGELOG.md

+
+ If you are using HTML, you will need to add the `govuk-` prefix to any `[data-module]` attributes referencing GOV.UK Frontend components.
+
+ If you are initialising components manually, you will need to add the `govuk-` prefix to any selectors referencing GOV.UK Frontend components:


any Javascript selectors

to make it super clear.

m-green · 2019-06-13T10:30:15Z

Hi @NickColley - I think I've managed to use sections to combine this in a way that avoids duplication (and means that each type of user - HTML/Javascript - gets their guidance in one go). And it's much shorter! Let me know what you think.
I think some of the terms I've used might not be quite right - let me know if so.

NickColley · 2019-06-13T11:59:00Z

CHANGELOG.md

@@ -268,72 +268,47 @@

 ([PR #1376](https://github.com/alphagov/govuk-frontend/pull/1376))

- Ensure GOV.UK Frontend component selectors cannot conflict when initialised
+- Update and add the data-module attribute


I think this title is too vague now

NickColley · 2019-06-13T11:59:18Z

CHANGELOG.md


- Components which have JavaScript functionality include a data attribute called `[data-module]`,
- we have added the `govuk-` prefix as a namespace.
+ The `[data-module]` attribute in components now has a `gov-uk` namespace prefix. This is to avoid conflicts between attribute names, and make the attributes consistent with our style for class names.


gov-uk -> govuk-

Conflicts with what? Before it was clear what it was conflicting with I think.

NickColley · 2019-06-13T12:00:49Z

CHANGELOG.md


- This ensures the component's name does not conflict with other service level components
- with the same name, which is consistent with our CSS class name convention.
+ The [button](https://design-system.service.gov.uk/components/button/#start-buttons) and [details](https://design-system.service.gov.uk/components/details/) components now also have the `[data-module]` attribute.


'now have' -> 'now use'?

NickColley · 2019-06-13T12:01:38Z

CHANGELOG.md


- If you're using Nunjucks macros, and are [using the `initAll` function](https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#option-1-include-javascript) you will not be affected.
+ You'll need to update your CSS or JavaScript code, to make sure that JavaScript can find and initalise the components.


I'm not sure CSS is relevant to this.

'JavaScript', 'your JavaScript'

NickColley · 2019-06-13T12:02:25Z

CHANGELOG.md

 </div>
 ```

- If you are initialising components manually, you will need to add the `govuk-` prefix to any CSS selectors used to find GOV.UK Frontend components:
+ You'll also need to add `data-module="govuk-button"` to each:


This is incorrect since we don't want to add 'govuk-button' to the details component

NickColley · 2019-06-13T12:03:05Z

CHANGELOG.md

- For example the accordion component selector has changed from `[data-module="accordion"]` to `[data-module="govuk-accordion"]`.
+ -- If you're using HTML and CSS
+
+ You'll need to add the `govuk-` prefix to the `[data-module]` attribute in each CSS selector.


Simplifying this to 'CSS' selector means this is no longer correct, as we want to help people using JavaScript not CSS

NickColley · 2019-06-13T12:17:28Z

Spoke to Mark and we're going to try and simplify the CHANGELOG later in the release notes so we can unblock other work. We need to pair on this to get it right...

The GOV.UK Design System V3 has introduced a data module for buttons[0] that allows JavaScript events to be registered. As per the documentation it's now present by default [0] alphagov/govuk-frontend#1443

This change is required due to new approach to namespacing[0] in V3.0 of the GOV.UK Design System [0] alphagov/govuk-frontend#1443

This is for compatibility with [version 3.0.0](https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0) of the govuk-frontend, which addes a prefix to `data-module` attributes to avoid namespacing conflicts. See [issue 1443](alphagov/govuk-frontend#1443)

The GOV.UK Design System V3 has introduced a data module for buttons[0] that allows JavaScript events to be registered. As per the documentation it's now present by default [0] alphagov/govuk-frontend#1443

This change is required due to new approach to namespacing[0] in V3.0 of the GOV.UK Design System [0] alphagov/govuk-frontend#1443

NickColley added 10 commits June 11, 2019 11:23

Add govuk- prefix namespace to data-modules

88b3f07

This ensures that the components cannot accidentally conflict with other components with the same name.

Target namespaced data-module selectors when initialising components

8a7e275

Update full page examples test data-modules selectors

89a8453

Update error summary test to target new namespaced data-module selector

cf6e023

fixup better place comment about shim

b447eff

Update details component comment to remove usage instructions

77ee1be

These are now consistent with all components

Update character count initialisation variable to be consistent

9f18649

Update documentation to use new prefixed data-modules selector

77d91ac

NickColley changed the title ~~Namespace data modules~~ [WIP] Namespace data modules Jun 11, 2019

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1443 June 11, 2019 11:08 Inactive

NickColley added this to the v3.0.0 milestone Jun 11, 2019

NickColley added the breaking change label Jun 11, 2019

NickColley changed the title ~~[WIP] Namespace data modules~~ [WIP] Namespace [data module] selector with govuk- and initialise button and details components with [data-module] selectors Jun 11, 2019

36degrees approved these changes Jun 12, 2019

View reviewed changes

NickColley changed the title ~~[WIP] Namespace [data module] selector with govuk- and initialise button and details components with [data-module] selectors~~ Ensure GOV.UK Frontend component selectors cannot conflict when initialised Jun 12, 2019

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1443 June 12, 2019 10:25 Inactive

NickColley commented Jun 12, 2019

View reviewed changes

NickColley requested a review from 36degrees June 12, 2019 12:08

hannalaakso reviewed Jun 12, 2019

View reviewed changes

NickColley force-pushed the namespace-data-modules branch from 91b17ff to b61e331 Compare June 12, 2019 15:59

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1443 June 12, 2019 15:59 Inactive

Add CHANGELOG entry

19fc174

NickColley force-pushed the namespace-data-modules branch from b61e331 to 19fc174 Compare June 12, 2019 16:15

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1443 June 12, 2019 16:15 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1443 June 13, 2019 10:27 Inactive

NickColley commented Jun 13, 2019

View reviewed changes

NickColley force-pushed the namespace-data-modules branch from 5b0025b to 19fc174 Compare June 13, 2019 12:16

govuk-design-system-ci deployed to govuk-frontend-review-pr-1443 June 13, 2019 12:16 View deployment

NickColley merged commit 7d8d4a5 into v3 Jun 13, 2019

NickColley deleted the namespace-data-modules branch June 13, 2019 12:20

NickColley mentioned this pull request Jun 13, 2019

Set debounceFormSubmitTimer at instance level instead of global #1370

Merged

aliuk2012 mentioned this pull request Jun 13, 2019

Namespacing [data-module] to avoid conflicts #1218

Closed

36degrees mentioned this pull request Jul 17, 2019

Update tab focus state #1496

Merged

peteryates added a commit to x-govuk/govuk-form-builder that referenced this pull request Aug 5, 2019

Update radios data-module to govuk-radios

3b264de

This change is required due to new approach to namespacing[0] in V3.0 of the GOV.UK Design System [0] alphagov/govuk-frontend#1443

peteryates added a commit to x-govuk/govuk-form-builder that referenced this pull request Aug 5, 2019

Update checkboxes data-module to govuk-checkboxes

9fa5670

This change is required due to new approach to namespacing[0] in V3.0 of the GOV.UK Design System [0] alphagov/govuk-frontend#1443

frankieroberto mentioned this pull request Oct 30, 2019

Add govuk- prefix to data-module attributes govuk-ruby/govuk-design-system-rails#2

Merged

peteryates added a commit to x-govuk/govuk-form-builder that referenced this pull request Jan 9, 2020

Update radios data-module to govuk-radios

26d92f0

This change is required due to new approach to namespacing[0] in V3.0 of the GOV.UK Design System [0] alphagov/govuk-frontend#1443

peteryates added a commit to x-govuk/govuk-form-builder that referenced this pull request Jan 9, 2020

Update checkboxes data-module to govuk-checkboxes

c4c8544

This change is required due to new approach to namespacing[0] in V3.0 of the GOV.UK Design System [0] alphagov/govuk-frontend#1443

snyk-bot mentioned this pull request Feb 25, 2020

[Snyk] Upgrade govuk-frontend from 3.0.0 to 3.5.0 ministryofjustice/offender-categorisation#400

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ensure GOV.UK Frontend component selectors cannot conflict when initialised #1443

Ensure GOV.UK Frontend component selectors cannot conflict when initialised #1443

NickColley commented Jun 11, 2019 •

edited

Loading

36degrees left a comment

NickColley Jun 12, 2019

NickColley Jun 12, 2019

hannalaakso Jun 12, 2019

hannalaakso Jun 12, 2019

NickColley Jun 12, 2019

NickColley Jun 12, 2019

hannalaakso Jun 12, 2019

m-green commented Jun 13, 2019 •

edited

Loading

NickColley Jun 13, 2019

NickColley Jun 13, 2019

NickColley Jun 13, 2019

NickColley Jun 13, 2019

NickColley Jun 13, 2019

NickColley Jun 13, 2019

NickColley Jun 13, 2019

NickColley commented Jun 13, 2019

		@@ -268,6 +268,77 @@

		([PR #1376](https://github.com/alphagov/govuk-frontend/pull/1376))

		- Ensure GOV.UK Frontend component selectors cannot conflict when initialised


		If you're using Nunjucks macros, and are [using the `initAll` function](https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#option-1-include-javascript) you will not be affected.

		If you are using HTML, you will need to add the `govuk-` prefix to any `[data-module]` attributes referencing GOV.UK Frontend components.


		If you are using HTML, you will need to add the `govuk-` prefix to any `[data-module]` attributes referencing GOV.UK Frontend components.

		If you are initialising components manually, you will need to add the `govuk-` prefix to any selectors referencing GOV.UK Frontend components:


		If you're using Nunjucks macros, and are [using the `initAll` function](https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#option-1-include-javascript) you will not be affected.
		You'll need to update your CSS or JavaScript code, to make sure that JavaScript can find and initalise the components.

Ensure GOV.UK Frontend component selectors cannot conflict when initialised #1443

Ensure GOV.UK Frontend component selectors cannot conflict when initialised #1443

Conversation

NickColley commented Jun 11, 2019 • edited Loading

36degrees left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

m-green commented Jun 13, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NickColley commented Jun 13, 2019

NickColley commented Jun 11, 2019 •

edited

Loading

m-green commented Jun 13, 2019 •

edited

Loading